import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/stores/company.dart';
import 'package:macnov/stores/signin.dart';
import 'package:image_picker/image_picker.dart';
import 'package:macnov/utils/Api.dart';

class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  String _avatarUrl;

  Widget _renderCircleHeader(context) {
    return Observer(
      builder: (_) => Row(children: <Widget>[
        Container(
          padding: EdgeInsets.all(10),
          child: Stack(
            children: <Widget>[
              _rendetAvatar(),
              Positioned(
                bottom: 0,
                child: Container(
                  padding: EdgeInsets.only(top: 4),
                  color: Colors.black54,
                  height: 28,
                  width: 90,
                  child: GestureDetector(
                    child: Text(
                      'change',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white),
                    ),
                    onTap: _changeAvatar,
                  ),
                ),
              )
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.only(left: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                child: Text(
                    '${signInStore.userInfo.firstName} ${signInStore.userInfo.lastName}',
                    style: TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                    )),
                padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
              ),
              Padding(
                child: Text('${signInStore.userInfo.email}',
                    style: TextStyle(color: Colors.black38)),
                padding: EdgeInsets.fromLTRB(0, 2, 0, 10),
              ),
            ],
          ),
        ),
      ]),
    );
  }

  _changeAvatar() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      var response = await Api.uploadAvatar(image);
      if (response['value'] != null) {
        setState(() {
          _avatarUrl = response['value'];
        });
        print('_changeAvatar : $_avatarUrl');
      }
    }
  }

  Widget _rendetAvatar() {
    String imagePath;
    var avatarInfo = signInStore.avatarInfo;
    if (_avatarUrl != null) {
      imagePath = _avatarUrl;
    } else if (avatarInfo['value'] == '') {
      return Image.asset(
        'assets/more/avatar_default.png',
        width: 90,
        height: 90,
        fit: BoxFit.fill,
      );
    } else {
      imagePath = avatarInfo['value'];
    }
    return ClipRRect(
      borderRadius: BorderRadius.circular(45),
      child: FadeInImage.assetNetwork(
        width: 90,
        height: 90,
        fit: BoxFit.cover,
        placeholder: 'assets/more/avatar_default.png',
        image: imagePath,
      ),
    );
  }

  Widget _renderCenterCard(context) {
    return new SizedBox(
      child: new Card(
        child: Observer(
          builder: (_) => new Column(
            // card只能有一个widget，但这个widget内容可以包含其他的widget
            children: [
              new ListTile(
                title: new Text(
                  'DISPALY NAME',
                  style: new TextStyle(
                      fontWeight: FontWeight.w500, color: Colors.black45),
                ),
                trailing: Text(
                  '${signInStore.userInfo.firstName} ${signInStore.userInfo.lastName} ',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new Divider(),
              new ListTile(
                title: new Text('FIRST NAME',
                    style: new TextStyle(
                        fontWeight: FontWeight.w500, color: Colors.black45)),
                trailing: Text(
                  '${signInStore.userInfo.firstName}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new Divider(),
              new ListTile(
                title: new Text('LAST NAME',
                    style: new TextStyle(
                        fontWeight: FontWeight.w500, color: Colors.black45)),
                trailing: Text(
                  '${signInStore.userInfo.lastName}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new ListTile(
                title: new Text(
                  'EMAIL',
                  style: new TextStyle(
                      fontWeight: FontWeight.w500, color: Colors.black45),
                ),
                trailing: Text(
                  '${signInStore.userInfo.email}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new Divider(),
              new ListTile(
                title: new Text('CELL PHONE',
                    style: new TextStyle(
                        fontWeight: FontWeight.w500, color: Colors.black45)),
                trailing: Text(
                  '${signInStore.userInfo.phone}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new Divider(),
              new ListTile(
                title: new Text('WORK NUMBER',
                    style: new TextStyle(
                        fontWeight: FontWeight.w500, color: Colors.black45)),
                trailing: Text(
                  '${signInStore.userInfo.phone}',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              new Divider(),
              new ListTile(
                title: new Text('BILLING ADDRESS',
                    style: new TextStyle(
                        fontWeight: FontWeight.w500, color: Colors.black45)),
              ),
              new ListTile(
                title: new Text('${companyStore.companyInfo.billingAddr}',
                    style: new TextStyle(
                      fontWeight: FontWeight.w500,
                    )),
              ),
              new ListTile(
                title: new Text(
                    '${companyStore.companyInfo.mailingCity} ${companyStore.companyInfo.mailingState} ${companyStore.companyInfo.mailingZipCode}',
                    style: new TextStyle(
                      fontWeight: FontWeight.w500,
                    )),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        iconTheme: IconThemeData(color: Colors.black87),
        elevation: 0.5,
        title: Text('PROFILE',
            style: TextStyle(
              color: Colors.black87,
            )),
      ),
      body: ListView(
        children: <Widget>[
          _renderCircleHeader(context),
          _renderCenterCard(context),
        ],
      ),
    );
  }

  @override
  void dispose() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    super.dispose();
  }
}
